<template>
  <atom-stock-list
    :table-data="tableData"
    :columns="columns"
    :footer-option="footerOption"
    v-if="tableData.length > 0 || footerOption.type === 'loading'"
    @sortChange="sortChange"
    @rowClick="rowClick"
  >
    <template #body-stockName="{ row }">
      <div class="stock-name">
        <div class="center">{{ row.stockName }}</div>
        <div class="tag-wrap">
          <div class="stock-code">{{ row.stockCode }}</div>
        </div>
      </div>
    </template>
    <template #body-ssts="{ row }">
      <p class="center">{{ row.ssts }}天</p>
    </template>
    <template #body-kbts="{ row }">
      <p class="center">{{ typeof row.kbts === 'number' ? row.kbts + '天' : row.kbts }}</p>
    </template>
    <template #body-isopen="{ row }">
      <p class="center">{{ row.isopen === 1 ? '开板' : '未开板' }}</p>
    </template>
  </atom-stock-list>
  <atom-empty type="search" v-else title="该日期暂无数据" />
</template>

<script>
import { jumpToFenShi } from '@/scripts/tools.js';

export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    footerOption: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    sortChange(params) {
      this.$emit('sortChange', params);
    },
    rowClick(params) {
      const { stockCode, marketCode } = params.row;
      jumpToFenShi(stockCode, marketCode);
    },
  },
};
</script>

<style lang="less" scoped>
.tag-wrap {
  display: flex;
  align-items: center;
  .stock-code {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 32px;
    font-weight: 400;
  }
}
/deep/.atom-stock-list-body-cell__text-0 {
  font-size: 32px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
